<template>
  <body>
    <div id="fillMajor">
      <div class="content">
        <div class="menuTitle">
          <!-- 面包屑 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据查询</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/fillAspiration' }"
              >模拟填志愿</el-breadcrumb-item
            >
            <el-breadcrumb-item>专业选择</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="collegeTitle">
          <!-- 对应院校 -->
          <el-card>
            <div class="collegeName">
              <span>{{ collegeInfo.name }}</span>
            </div>
            <div class="collegeInfo">
              <span class="tag_item"
                >录取概率<span>{{ collegeInfo.probability }}</span
                ><span>%</span></span
              >
              <span class="tag_item"
                >招生代码<span>{{ collegeInfo.code }}</span></span
              >
              <span class="tag_item"
                >招生人数<span>{{ collegeInfo.num }}</span></span
              >
            </div>
            <div class="zhiyuanForm">
              <router-link to="/home/voluntaryForm">我的志愿表</router-link>
            </div>
          </el-card>
        </div>
        <div class="majorList">
          <!-- 院校对应专业 -->
          <el-card>
            <div class="zhiyuanNum">
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="院校志愿">
                  <el-select v-model="yuanxiaoNum" placeholder="院校志愿">
                    <el-option
                      v-for="(item, index) in numList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <h4 style="font-size: 16px; color: rgba(255, 0, 0)">
                    *这里有默认的志愿顺序，你也可以自己选择
                  </h4>
                </el-form-item>
              </el-form>
            </div>
            <div class="resultTable">
              <el-table
                :data="tableData"
                border
                stripe
                ref="resultData"
                :header-cell-style="headClass"
              >
                <el-table-column
                  prop="probability"
                  label="录取概率"
                  width="120"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.probability === 0">--</span>
                    <span
                      v-if="scope.row.probability > 0"
                      :style="{ color: color(scope.row.probability) }"
                      >{{ scope.row.probability }}%
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="sMajorId"
                  label="代码"
                  width="100"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.sMajorId }} </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="专业名称"
                  width="350"
                  show-overflow-tooltip
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.name }} </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="num"
                  label="招生数"
                  width="200"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.num }} </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="tuition"
                  label="学费"
                  width="200"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.tuition }} </span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button
                      class="oldStyle"
                      :class="scope.row.status === 1 ? 'newStyle' : ''"
                      @click="changeStyle(scope.row)"
                      ><span v-if="scope.row.status !== 1">填报</span>
                      <span v-else-if="scope.row.status === 1">已填</span>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="bottomBtn">
              <el-button @click="reset">重置</el-button>
              <el-button @click="submit">保存志愿</el-button>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
import qs from "qs";
import Base64 from "base-64";
import throttling from "@/public/throttling.js";
export default {
  name: "fillMajor",
  data() {
    return {
      // 收到的数据
      unvId: "",
      formType: "",
      // 懒加载
      // 结果数组
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      name: "",
      // 填报按钮是否变色
      isChange: "",
      // 是否服从调剂
      tiaoji: "",
      // 第几志愿 v-model
      yuanxiaoNum: "",
      // 第几志愿 存储变量
      zhiyuan: "",
      // 获取前一页数据
      collegeInfo: {
        name: "",
        code: "",
        num: "",
        probability: "",
      },
      active: 0,
      // 首页用户名
      showManager: false,
      showname: false,
      logoImg: require("@/assets/Logo.jpeg"),
      img: require("@/assets/二维码.png"),
      collegeTitle: {
        unvId: "",
        name: "",
        logo: "",
        address: "",
        type: "",
        category: "",
        is985: "",
        is211: "",
        feature: "",
        province: "",
        officialsite: "",
        phonenumber: "",
        schoolemail: "",
      },
      // 院校志愿表单
      numList: [
        {
          label: "院校志愿1",
          value: 1,
        },
        {
          label: "院校志愿2",
          value: 2,
        },
        {
          label: "院校志愿3",
          value: 3,
        },
        {
          label: "院校志愿4",
          value: 4,
        },
        {
          label: "院校志愿5",
          value: 5,
        },
        {
          label: "院校志愿6",
          value: 6,
        },
        {
          label: "院校志愿7",
          value: 7,
        },
        {
          label: "院校志愿8",
          value: 8,
        },
        {
          label: "院校志愿9",
          value: 9,
        },
      ],

      // 填报数组
      chooseMajorList: [],
    };
  },
  methods: {
    // 表格表头
    headClass() {
      //表头居中显示
      return "color:rgba(255,101,0);font-weight:bold;font-size:16px;text-align:center";
    },
    // 区分录取概率
    color(pro) {
      if (pro === 0) {
        return;
      } else if (pro < 50) {
        return "rgba(255, 97, 97)";
      } else if (pro < 80) {
        return "rgba(33, 193, 51)";
      } else {
        return "rgba(0, 182, 244)";
      }
    },
    // 按钮是否变样式
    changeStyle: throttling(function (item, index) {
      if (item.status === 0) {
        if (this.chooseMajorList.length >= 6) {
          this.$message.error("一个学校最多填报六个专业！");
          console.log("已满6个");
          return;
        } else {
          item.status = 1;
          this.chooseMajorList.push(item.sMajorId);
        }
      } else {
        item.status = 0;
        this.chooseMajorList.splice(this.chooseMajorList.indexOf(index + 1), 1);
      }
      console.log(this.chooseMajorList);
    }, 200),
    // 重置
    reset: throttling(function () {
      const token = window.sessionStorage.getItem("tokenvalue");
      this.$axios.defaults.headers.common["satoken"] = token;
      this.$axios
        .post(
          "/reWilling",
          qs.stringify({
            unvId: this.unvId,
          })
        )
        .then((res) => {
          console.log(res);
          this.$axios
            .post(
              "/recommendMajor",
              qs.stringify({
                unvId: this.unvId,
                admissionBatch: this.$route.query.formType,
              })
            )
            .then((res) => {
              console.log(res);
              this.tableData = res.data.majorList;
              this.chooseMajorList = [];
              this.$message.success("重置成功");
            });
        });
    }, 200),
    // 保存志愿
    submit: throttling(function () {
      this.$axios
        .post("/saveWilling", {
          formType: this.$route.query.formType,
          unvId: this.unvId,
          wunId: this.yuanxiaoNum,
          list: this.chooseMajorList,
        })
        .then((res) => {
          console.log(this.chooseMajorList);
          console.log(res);
          this.$axios
            .post(
              "/recommendMajor",
              qs.stringify({
                unvId: this.unvId,
                admissionBatch: this.$route.query.formType,
              })
            )
            .then((res) => {
              this.$message.success("保存志愿成功");
              console.log(res);
              this.tableData = res.data.majorList;
            });
        });
    }, 200),
  },

  created() {
    this.unvId = this.$route.query.unvId;
    this.$axios
      .post(
        "/recommendMajor",
        qs.stringify({
          unvId: this.unvId,
          admissionBatch: this.$route.query.formType,
        })
      )
      .then((res) => {
        console.log(res);
        // 默认选择志愿
        let zhiyuan = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
        let _this = this;
        if (res.data.status === null) {
          for (let index = 0; index < 9; index++) {
            if (zhiyuan[index] !== res.data.list1[index]) {
              console.log("@@@@", zhiyuan[index]);
              this.yuanxiaoNum = Number(zhiyuan[index]);
              break;
            }
          }
        } else {
          this.yuanxiaoNum = Number(res.data.status);
        }
        this.collegeInfo = res.data.getUniversityVo;
        this.tableData = res.data.majorList;
        this.chooseMajorList = [];
        res.data.majorList.forEach((element) => {
          if (element.status === 1) {
            this.chooseMajorList.push(element.sMajorId);
          }
        });
      });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  width: 100%;
}

#fillMajor {
  display: flex;
  flex-direction: column;
}

li {
  list-style: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  margin: 1.6vh auto;
}

.menuTitle {
  height: 6.5vh;
  line-height: 6.5vh;
  text-align: left;
  margin-left: 2.2vw;
}

.el-breadcrumb {
  height: 2.9vh;
  line-height: 2.9vh;
}

.menuTitle .el-breadcrumb__item {
  font-size: 14px;
}

.collegeTitle /deep/ .el-card {
  margin: 0 auto;
  width: 95%;
}

.collegeName,
.collegeInfo {
  float: left;
  height: 4.9vh;
  line-height: 4.9vh;
  margin-bottom: 3.3vh;
}

.collegeInfo {
  margin-left: 1.5vw;
}

.collegeName span {
  font-size: 24px;
  font-weight: bold;
}

.tag_item {
  color: #555555;
  font-size: 14px;
  padding-right: 0.7vw;
  margin-right: 0.7vw;
  border-right: 1px solid #c5c5c5;
  line-height: 2.4vh;
  cursor: pointer;
}

.tag_item span {
  margin-left: 5px;
}

.majorList /deep/ .el-card {
  margin: 20px auto;
  width: 95%;
}

.zhiyuanForm {
  float: right;
  width: 11.1vw;
  height: 4.9vh;
  line-height: 4.9vh;
}

.zhiyuanForm a {
  font-size: 18px;
  color: #555555;
}
.zhiyuanForm a:hover {
  color: rgba(255, 101, 0);
}

.resultTable /deep/ .el-table {
  width: 93.2%;
  margin: 10px auto;
}

table {
  width: 95%;
  margin: 1.6vh auto;
  border: 1px solid rgba(235, 238, 245);
  border-collapse: collapse; /*设置表格的边框是否被合并为一个单一的边框*/
  border-spacing: 0; /*设置相邻单元格的边框间的距离*/
}

tr {
  width: 22.2vw;
  height: 8.1vh;
  line-height: 8.1vh;
  border: 1px solid rgba(235, 238, 245);
}

td {
  white-space: nowrap;
}

td,
th {
  border: 1px solid rgba(235, 238, 245);
  width: 7.3vw;
  height: 8.1vh;
  line-height: 8.1vh;
  text-align: center;
}

.oldStyle {
  color: rgba(255, 101, 0);
  border: 1px solid rgba(255, 101, 0);
}

.newStyle {
  color: white;
  background-color: rgba(255, 97, 97);
  border: rgba(255, 97, 97);
  border: none;
}

.bottomBtn {
  width: 14.1vw;
  height: 8.1vh;
  line-height: 8.1vh;
  margin: 2.4vh auto 0;
}

.bottomBtn /deep/ .el-button:first-child {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(255, 101, 0);
}

.bottomBtn /deep/ .el-button:last-child {
  background-color: rgba(255, 101, 0);
  color: #fff;
}
</style>
